/* eslint-disable @typescript-eslint/ban-ts-comment */
import { t } from '@src/locales';
import { computed, defineComponent, nextTick, PropType, ref, toRef, toRefs, unref } from 'vue';
import { ConnectorModuleConnectorDialogDetailColumn } from '@src/modules/connector/components';
import { message } from '@src/util/message';
import { ConnectorAppModuleListItem, ConnectorField, ConnectorToField } from '@src/modules/connector';
import { connectorToFields2FormFields, getSortConnectorToFieldsByShowFieldNameList, sortConnectorToFieldsByShowFieldNameList } from '@src/modules/connector/util';
import { ComponentEmitAction } from '@src/component/form/components/FormConnector/components/FormConnectorDataRuleSetting/model/enum/action';

type FormConnectorDataRuleSettingFieldsProps = {
    fields: ConnectorToField[],
    showFieldNameList: string [],
    selectFormValue: Record<string, any>
}

export default defineComponent({
  props: {
    fields: {
      type: Array as PropType<ConnectorToField[]>,
      default: ()=> [],
    },
    showFieldNameList: {
      type: Array as PropType<string []>,
      default: ()=> [], 
    },
    selectFormValue: {
      type: Object as PropType<Record<string, any>>,
      default: ()=> ({})
    }
  },
  setup(props:FormConnectorDataRuleSettingFieldsProps, { emit }) {
    const { fields, showFieldNameList } = toRefs(props)

    const selectOptions = ref<ConnectorField[]>([])
    const selectColumnRef = ref<typeof ConnectorModuleConnectorDialogDetailColumn>();

    const openSelectColumnDialog = () => {
      
      //   if (!props.selectFormValue.bizTypeId) {
      //     message.error(t('common.connector.validate_rule.selectApp'))
      //     return
      //   }
        
      selectColumnRef.value?.openSelectColumnDialog()
    };

    const onConnectorShowFieldNameListInputHandler = (v: string []) =>{
      // TODO 从之前的setting拷贝过来的没啥用感觉
      //   nextTick(() => {
            
      //     //   const tableColumns = this.componentTableColumns
            
      //     //   this.options = tableColumns
      //     //   this.selectedColumns = tableColumns.filter(item=> item.show)
      //     //   this.$refs.selectColumnRef?.setTableColumns(tableColumns)
            
      //     // 选择列这里重新渲染一遍
      //     //   this.selectedColumnsKey = uuid()
            
      //     //   this.$set(this.field.setting.connector, 'showFieldNameList', value)
            
      //   })

      emit(ComponentEmitAction.Input, { field: null, newValue: v })
        
    }

    const onConnectorShowFieldNameListSaveHandler = (value: ConnectorField[]) => {
      selectOptions.value = value
    }

    const selectValue = computed(()=> connectorToFields2FormFields(getSortConnectorToFieldsByShowFieldNameList(fields.value, showFieldNameList.value || []) ))

    const optionsList = computed(()=> connectorToFields2FormFields(fields.value))


    const columns = computed(()=> {
      const showFieldNameListValue = unref(showFieldNameList)
      const sortByFieldNameConnectorFields = sortConnectorToFieldsByShowFieldNameList(fields.value, showFieldNameListValue)

      return sortByFieldNameConnectorFields.map((field, index)=> {
        const fieldName = field.enName || ''
        return { 
          ...field, 
          show: showFieldNameListValue.length > 0 
            ? showFieldNameListValue.includes(fieldName) 
            : index <= 4 ? true : field?.show
        }
      })
    })


    return () => (
      <div class="form-connector-setting__field">
        <el-select 
          value={selectValue.value} 
          value-key="fieldName" 
          multiple 
          placeholder={t('common.connector.fieldSetting.fieldPlaceholder')} 
          onFocus={openSelectColumnDialog} 
          class="select-show-column"
          popper-class="select-show-column__panel">
          {
            optionsList.value.map((field: ConnectorField)=> {
              return (
                <el-option
                  key={field.fieldName}
                  label={field.displayName}
                  value={field}
                ></el-option>
              )
            })
          }
        </el-select>

        <ConnectorModuleConnectorDialogDetailColumn 
        // @ts-ignore
          columns={columns.value}
          maxLength={10} 
          onInput={onConnectorShowFieldNameListInputHandler}
          onSave={onConnectorShowFieldNameListSaveHandler}
          ref={selectColumnRef} 
          style={{ display: 'none' }}
        />
      </div>
    );
  },
});
